<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
<form action="" id="loginForm" method="post">
    <div>
        <input type="button" onclick="websocket()" value="连接"/>
    </div>
    <div>
        <input type="text" id="data" placeholder="请输入消息"/>
    </div>
    <div>
        <input type="button" onclick="send()" value="发送"/>
    </div>
</form>


<script>

    function websocket(){
        let socket="";

        if(typeof(WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        }else{
            console.log("您的浏览器支持WebSocket");
                socket = new WebSocket("ws://localhost:7777/websocket/123456");
            //socket = new WebSocket("ws://localhost:7777/websocket/GaoYi888");
            socket.onopen = function() {
                socket.send("我发来的消息")

            };
            socket.onmessage = function(msg) {
                console.log("receive：" + msg.data);
            };
            socket.onclose = function() {
                console.log("Socket已关闭");
            };
            socket.onerror = function() {
                console.log("Socket发生了错误");
            }
        }
    }


    function send() {
        let data =  {"content" : $("#data").val(),"sendId":"1234"}
            $.ajax({
                url : "/chat/send",
                async : false,
                type : "POST",
                contentType : 'application/json',
                dataType : 'json',
                data :JSON.stringify(data),
                success : function(data) {
                    console.log("你发送的数据为：" + data)
                }
            });
    }
</script>

</body>
</html>
